<template>
	<view class="wrap">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" color="#333" size="20"></u-icon>
			</view>
			<view class="nav-title">我的收藏</view>
			<view class="nav-right"></view>
		</view>

		<!-- 标签页切换 -->
		<!--<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 'books' }" @click="switchTab('books')">
				<text class="tab-text">绘本</text>
				<view class="tab-line" v-if="activeTab === 'books'"></view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'collections' }" @click="switchTab('collections')">
				<text class="tab-text">绘本集</text>
				<view class="tab-line" v-if="activeTab === 'collections'"></view>
			</view>
		</view>-->

		<!-- 内容区域 -->
		<view class="content">
			<!-- 绘本列表 -->
			<view v-if="activeTab === 'books'" class="books-grid">
				<view class="book-item" v-for="(book, index) in books" :key="index" @click="openBookByIndex(index)">
					<view class="book-cover">
						<image :src="book.cover" mode="aspectFill" class="cover-image"></image>
						<view class="read-status">
							<u-icon name="heart-fill" color="#ff6b9d" size="12"></u-icon>
							<text class="status-text">已读 {{ book.readStatus }} 遍</text>
						</view>
					</view>
					<text class="book-title">{{ book.bookName }}</text>
				</view>
			</view>

			<!-- 绘本集列表 -->
			<view v-if="activeTab === 'collections'" class="collections-grid">
				<view class="collection-item" v-for="(collection, index) in collections" :key="index" @click="openCollection(collection)">
					<view class="collection-cover" :style="{ backgroundColor: collection.bgColor }">
						<text class="collection-title-on-cover">{{ collection.titleOnCover }}</text>
						<view class="collection-icon">
							<view class="star-icon">⭐</view>
						</view>
						<view class="read-count">
							<text class="count-text">{{ collection.readCount }}</text>
						</view>
						<view class="collection-badge">
							<text class="badge-text">{{ collection.badge }}</text>
						</view>
					</view>
					<text class="collection-title">{{ collection.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as bookShelfCollectApi from '@/api/bookShelfCollect.js'
	
export default {
	data() {
		return {
			statusBarHeight: 0,
			activeTab: 'books',
			books: [],
			collections: [
				{
					id: 1,
					title: 'Fun at the Be...',
					titleOnCover: 'Fun at the Beach',
					bgColor: '#FF8C42',
					readCount: '已读1遍',
					badge: 'IN'
				}
			]
		};
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		this.getListByCurrentUser();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		switchTab(tab) {
			this.activeTab = tab;
		},
		openBook(book) {
			this.$toast(`打开绘本：${book.title}`);
		},
		openCollection(collection) {
			this.$toast(`打开绘本集：${collection.title}`);
		},
		
		
		async getListByCurrentUser(){
			const resp = await bookShelfCollectApi.getListByCurrentUser()
			console.log(resp)
			this.books = resp.data
		},
		
		// 通过索引打开书籍
		openBookByIndex(index) {
			console.log('通过索引打开书籍 - index:', index);
			console.log('书籍列表长度:', this.books.length);
		
			if (index < 0 || index >= this.books.length) {
				console.error('索引超出范围:', index);
				return;
			}
		
			const book = this.books[index];
			console.log('获取到的书籍对象:', book);
		
			this.openBook(book);
		},
		// 打开书籍
		openBook(book) {
			console.log('打开书籍 - 原始参数:', book);
			console.log('打开书籍 - 参数类型:', typeof book);
			console.log('打开书籍 - 是否为undefined:', book === undefined);
		
			if (!book) {
				console.error('书籍参数为空或undefined');
				return;
			}
		
			// 构建跳转参数
			const params = {
				bookName: encodeURIComponent(book.bookName || book.titleOutside),
				bookId: book.bookShelfId,
				isCollected: book.isCollect || false,
				url: encodeURIComponent(book.url || '')
			};
		
			// 将参数转换为URL查询字符串
			const queryString = Object.keys(params)
				.filter(key => params[key] !== '')
				.map(key => `${key}=${params[key]}`)
				.join('&');
		
			console.log('跳转参数:', params);
		
			// 跳转到图片轮播页面
			uni.navigateTo({
				url: `/pages/video/player?${queryString}`
			});
		},
	}
};
</script>

<style lang="scss">
.wrap {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.status-bar {
	width: 100%;
	background-color: #fff;
}

// 导航栏
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 40rpx;
	background-color: #fff;
	height: 88rpx;
}

.nav-left, .nav-right {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

// 标签页
.tab-bar {
	display: flex;
	background-color: #fff;
	padding: 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
	position: relative;
	padding: 30rpx 0;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tab-text {
	font-size: 32rpx;
	color: #999;
	transition: color 0.3s;
}

.tab-item.active .tab-text {
	color: #007AFF;
	font-weight: 500;
}

.tab-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #007AFF;
	border-radius: 2rpx;
}

// 内容区域
.content {
	padding: 40rpx;
}

// 绘本网格
.books-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40rpx;
}

.book-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.book-cover {
	position: relative;
	width: 280rpx;
	height: 360rpx;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.cover-image {
	height: 250rpx;
	border-radius: 12rpx;
	position: relative;
	margin-bottom: 10rpx;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.read-status {
	position: absolute;
	top: 16rpx;
	left: 16rpx;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 20rpx;
	padding: 8rpx 16rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.status-text {
	font-size: 20rpx;
	color: #fff;
}

.book-title {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	max-width: 280rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// 绘本集网格
.collections-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40rpx;
}

.collection-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.collection-cover {
	position: relative;
	width: 280rpx;
	height: 360rpx;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	padding: 30rpx;
}

.collection-title-on-cover {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20rpx;
}

.collection-icon {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.star-icon {
	width: 80rpx;
	height: 80rpx;
	background-color: #FFD700;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
}

.read-count {
	margin-bottom: 20rpx;
}

.count-text {
	font-size: 24rpx;
	color: #fff;
}

.collection-badge {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	background-color: #007AFF;
	border-radius: 8rpx;
	padding: 8rpx 16rpx;
}

.badge-text {
	font-size: 20rpx;
	color: #fff;
	font-weight: bold;
}

.collection-title {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	max-width: 280rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>